
var oulBox = document.querySelector("#ulbox");
var container = document.querySelector(".container")
// 接受标题的titleId
var arr = [];
// 接受每个div的内容
var arr1 = [];

(function(){
const xhr =new XMLHttpRequest();
xhr.open("get","http://chst.vip:1234/api/getbrandtitle",false);

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        var res = JSON.parse(xhr.responseText);
        console.log(res.result);
        var rex = res.result;
        var ele = "";
        rex.forEach(item => {
          arr.push(item.brandTitleId) ;
          ele += `
          <li brandTitleId="${item.brandTitleId}">
          <p brandTitleId="${item.brandTitleId}"  class="p1">
              ${item.brandTitle}
              <span></span>
          </p>
          <div></div>
      </li>
              `  
        });
        oulBox.innerHTML = ele; 
        
    }
}
 xhr.send(null);
})();
// 发送二级请求
(function(){
arr.forEach(value => {
    const xhr2 = new XMLHttpRequest();
    xhr2.open("get","http://chst.vip:1234/api/getbrand?brandtitleid="+value,false);
    xhr2.onreadystatechange = function(){
    if(xhr2.readyState === 4 && xhr2.status === 200){
        var res2 = JSON.parse(xhr2.responseText);
        console.log(res2);
        var ele2 = "";
        res2.result.forEach(item => {
        ele2 += `
        <a href="../html/十大商品.html?brandtitleid=${item.brandTitleId}" >
        <i>${item.brandId}</i>
        ${item.brandName}
                    <p>${item.brandInfo}
                    </p>
                </a>
        `
        // console.log(item);
        });
    arr1.push(ele2);
    ele2 = "";    
    }
    }
    xhr2.send(null);
})
// 获取到每个div给div中写入存在数组的内容
var oDiv = document.querySelectorAll("#ulbox li div")
console.log(oDiv);
oDiv.forEach((item,index)=>{
console.log(item);
console.log(oDiv[index])
item.innerHTML = arr1[index];
})

// 效果
$("#ulbox").find("div").slideUp(0,function(){
    $("#ulbox").css("display","block");
});


// console.log($("#ulbox li"))

$("#ulbox li").click(function(){
    // console.log($(this))
    
    $(this).find("div").slideToggle().parent().siblings().find("div").slideUp();
    
})

$('.gotop').click(function () {
    $('body, html').animate({ scrollTop: 0 }, 1000)
})
})();
